<script setup >
import { defineAsyncComponent, ref } from 'vue'
import Avatar from './Avatar.vue';

const props = defineProps(['isOpenModal'])
const emit = defineEmits(['closeModal'])

function closeModal() {
    emit('closeModal')
}


// subModal
const AddTeacherModal = defineAsyncComponent(() => import('./AddTeacherModal.vue'))
const isOpenModal = ref(false)
const modalName = ref('')
function openModal(name) {
    isOpenModal.value = true;
    modalName.value = name;
}
function closeSubModal() {
    isOpenModal.value = false
}

</script>
<template>
    <div class="member-management-modal" :class="{ open: props.isOpenModal }">

        <div class="container">
            <div class="content">
                <div class="header">
                    <img src="/src/assets/images/student/close.svg" alt="Delete" @click="closeModal" />
                </div>

                <div class="main">
                    <div class="instructor">

                        <p>指导老师</p>
                        <button type="button" @click="openModal('add_teacher')" >添加指导老师</button>
                    </div>
                    <div class="instructor-container">
                        <div class="avatar">
                            <img src="/src/assets/images/student/avatar.svg" alt="Avatar" width="68">
                        </div>
                        <div class="introduction">
                            <p>XXX老师</p>
                            <p>指导方向</p>
                            <p>联系方式</p>

                        </div>
                    </div>
                    <div class="team-members">
                        <p>团队成员</p>
                        <button>添加成员</button>
                    </div>
                    <div class="team-members-container" >
                        <Avatar :name="1" :url="'/src/assets/images/student/avatar.svg'"  class="members" />
                        <Avatar :name="2" :url="'/src/assets/images/student/avatar.svg'" class="members" />
                        <Avatar :name="3" :url="'/src/assets/images/student/avatar.svg'" class="members" />
                        <Avatar :name="4" :url="'/src/assets/images/student/avatar.svg'"  class="members" />
                        <Avatar :name="5"  :url="'/src/assets/images/student/avatar.svg'"  class="members" />
                        <Avatar :name="6" :url="'/src/assets/images/student/avatar.svg'" class="members" />
                        <Avatar :name="7" :url="'/src/assets/images/student/avatar.svg'"  class="members" />
                        <Avatar :name="8" :url="'/src/assets/images/student/avatar.svg'" class="members" />
                        <Avatar :name="9" :url="'/src/assets/images/student/avatar.svg'" class="members" />
                    </div>
                </div>
            </div>
        </div>
        <AddTeacherModal v-if="modalName == 'add_teacher'"  :is-open-modal="isOpenModal" @close-modal="closeSubModal"  />
    </div>


</template>
<style scoped>
.member-management-modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 15;
}

.member-management-modal.open {
    display: block;
}

.member-management-modal>.container {
    display: flex;
    width: 100%;
    /* height: 100%;*/
    justify-content: center;
    align-items: center;
}

.member-management-modal>.container>.content {
    width: 837px;
    /*height: 491px;*/
    background-color: #ffffff;
    border: none;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 50px;
    margin: 50px 0;
}

.member-management-modal>.container>.content>.header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
}

.member-management-modal>.container>.content>.header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s;
}

.member-management-modal>.container>.content>.header>img:hover {
    transform: rotate(90deg);
}

.instructor,
.team-members {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.instructor>p,
.team-members>p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 30px;
    font-weight: bold;
}


.instructor>button,
.team-members>button {
    width: 120px;
    height: 36px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border: none;
    border-radius: 6px;
    color: #fafafa;
    text-align: center;
    cursor: pointer;
    line-height: 36px;
    font-size: 18px;
    padding: 0;
    font-family: Source Han Sans CN;
    user-select: none;
}

.instructor>button:hover,
.team-members>button:hover {
    opacity: 0.85;
}

.instructor>button:active,
.team-members>button:active {
    transform: translateY(3px);
}

.instructor-container {
    display: flex;
    background-color: #e4e7ed;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
    height: 146px;
    margin-bottom: 20px;
}

.instructor-container>.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-color: #707070;
	border: solid 1px #707070;
	opacity: 0.2;
}

.instructor-container>.introduction {
    width: 70%;
    padding: 17px 33px;
}

.instructor-container>.introduction > p {
    font-family: Source Han Sans CN;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	color: #707070;
    margin-bottom: 20px;
}

.team-members-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #ecedf0;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);

}

.team-members-container > .members {
    margin: 10px 30px;
}


</style>